import React, {Component} from 'react';
import {connect} from 'react-redux';
import Topic from './components/Topic';
import List from './components/List';
import Recommend from './components/Recommend';
import Writer from './components/Writer';
import {actionCreators} from './store';
import {HomeWrapper, HomeLeft, HomeRight, BackTop} from './style';

class Home extends Component{

    handleScrollTop(){
        window.scrollTo(0,0);
    }

    shouldComponentUpdata(){
        
    }

    componentDidMount(){
       this.props.changeHomeData();
       this.bindEvents();
    }

    componentsWillUnmount(){
        window.removeEventListener('scroll', this.props.changeScrollTopShow);
    }

    bindEvents(){
        window.addEventListener('scroll', this.props.changeScrollTopShow);
    }

    render(){
        return(
            <HomeWrapper>
                <HomeLeft>
                    <img alt='app' className={'banner-img'} src="https://upload.jianshu.io/admin_banners/web_images/4581/b346d0388557ad1a1b514d185340ac6886192dc9.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" />
                    <Topic />
                    <List />
                </HomeLeft>
                <HomeRight>
                    <Recommend />
                    <Writer />                
                </HomeRight>
                {this.props.showScroll ? <BackTop onClick={this.handleScrollTop}>回到顶部</BackTop> : ''}
            </HomeWrapper>
        )
    }
}

const mapStateToProps = (state) => ({
    showScroll: state.getIn(['home', 'showScroll'])
})

const mapDispatchToProps = (dispatch) => ({
    changeHomeData(){
        dispatch(actionCreators.getHomeInfo());
    },
    changeScrollTopShow(e){
        if(document.documentElement.scrollTop > 400 ){
            dispatch(actionCreators.toggleTopShow(true))
        }else{
            dispatch(actionCreators.toggleTopShow(false))
        }
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(Home);